<template>
  <div class="billing-back" style="">
    <div style="display: flex;padding: 15px;justify-content: center">
      <el-form :model="form" label-width="auto" style="width: 300px">
        <el-form-item label="">
          <el-input clearable @input="getBillingMgr()" placeholder="输入具体信息" v-model="form.queryString"  />
        </el-form-item>
      </el-form>
      <div style="padding-left: 3px">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="用于查询相关数据"
          placement="bottom"
        >
          <el-button type="primary" icon="Search" @click="getBillingMgr()" round>查询</el-button>
        </el-tooltip>

        <el-tooltip
          class="box-item"
          effect="dark"
          content="可以在该表中添加数据"
          placement="bottom"
        >
          <el-button type="success" icon="Plus" @click="centerDialogVisible = true" round>添加</el-button>
        </el-tooltip>
      </div>
    </div>

    <div class="billing-table">
      <el-table :data="tableData" @selection-change="handleSelectionChange"  height="600" style="width: 1300px;border-radius: 10px;text-align: center">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="uuid" label="uuid" width="90" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="amount" label="金额数字(RMB)" width="180">
          <template #default="scope">
            <el-tag type="primary">{{scope.row.amount}} ￥</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="chinaAmount" label="金额中文(大写)" width="120" />
        <el-table-column prop="describe" label="描述" width="180" />
        <el-table-column prop="createTime"  column-key="date" sortable label="收款日期" width="240" />
        <el-table-column fixed="right" label="操作数据表" min-width="230">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除该表中该行数据"
              placement="left-start"
            >
              <el-button link type="danger" icon="Delete"  @click="deleteLine(scope.row.id)" />
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="点击可以编辑该行的数据"
              placement="right-start"
            >
              <el-button link type="primary" @click="editOpen" icon="EditPen" />
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
      <!-- 总金额显示 -->

    </div>
    <p style="margin-top: 10px; text-align: center; color:#ffffff; padding: 10px;">
      总金额: {{ totalAmount }} <span style="color: #fcfcfc">￥</span>
    </p>
    <div class="demo-pagination-block"  style="padding: 0 30px;display:flex;justify-content: center;">
      <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 60, 80]"
        :size="size"
        :disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="centerDialogVisible"
      title="收款"
      width="540"
      destroy-on-close
      align-center
      :before-close="handleClose"
      draggable
    >
      <div style="position: relative;left: 16px">
        <el-form :inline="true" status-icon :model="formInline" ref="" label-width="auto" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="formInline.name"
              lable="xm"
              placeholder="请输入姓名"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formInline.amount"
              placeholder="输入金额"
              :formatter="(value: any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
            />
          </el-form-item>
          <el-form-item label="" prop="desc">
            <el-input with="200" placeholder="输入金额(中文大写)" v-model="formInline.chinaAmount" type="textarea" />
          </el-form-item>
<!--          <el-form-item label="">-->
<!--            <el-select-->
<!--              v-model="formInline.region"-->
<!--              placeholder="选择收礼人"-->
<!--              clearable-->
<!--            >-->
<!--              <el-option label="Zone one" value="shanghai" />-->
<!--              <el-option label="Zone two" value="beijing" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item label="" prop="desc">
            <el-input style="min-height: 60px" placeholder="填写相关内容描述" v-model="formInline.describe" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
<!--          <el-button @click="handleClose">取消</el-button>-->
          <el-button type="primary" @click="addBillingData()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getUser,menuMgr,addBilling} from "@/api/api"
import type { Billing } from "@/interface/menu";
const form = ref({queryString:''})
import type {ComponentSize, DrawerProps} from 'element-plus'
import {success,error} from "@/message/messageApi"
import {tree} from "@/api/api"
import axios from "axios";
import {ElMessageBox,ElMessage} from "element-plus";
import {BASE_URL_PEPAY} from "@/api/config";
const tableData = ref<Billing>()
const totalAmount = ref(0)
const drawer = ref(false)
const centerDialogVisible = ref(false)
// onMounted(() =>{
// })
const formInline = reactive({
  name: '林浩',
  amount: '1389',
  chinaAmount: '壹仟叁佰巴捌拾玖',
  describe:'田坝寨',
})

const currentPage = ref(1)
const pageSize = ref(20)
const queryString = ref("")
const total = ref(0)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const multipleSelection = ref([]);
const uuid = ref([]);
const direction = ref<DrawerProps['direction']>('rtl')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭吗')
    .then(() => {
      done()
      close()
    })
    .catch(() => {
      //console.log(error)
    })
}
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  getBillingMgr();

}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage.value = val;
  getBillingMgr();
}
function getBillingMgr(){
  axios.get(`${BASE_URL_PEPAY}` + "/bill/billingList",{
    params:{
      currentPage:currentPage.value,
      pageSize:pageSize.value,
      queryString:form.value.queryString
    }
  }).then((res:{data:any}) =>{
    //console.log(res)
    tableData.value= res.data.data;
    total.value = res.data.total;
    totalAmount.value = res.data.amountAll;
  })
}

function addBillingData() {
  console.log(formInline)
  axios.post(`${BASE_URL_PEPAY}` + '/bill/addBillingList',formInline).then((res) =>{
    if (res.data.code === 200){
      success(res.data.message)
      getBillingMgr();
    } else {
      error(res.data.message)
    }
  }).catch(error =>{
    ElMessage.error("服务器错误")
  })
}

function deleteLine(val:any){}

function editOpen(){}
function handleSelectionChange(val: any){

}

getBillingMgr();

</script>

<style scoped>
.tree-container {
  height: 300px;
  width: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  display: flex;
  align-items: stretch;
}
.billing-back{
  display: flow;
  background: url('../../../assets/happy.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
  border-radius: 5px;
  overflow-y: scroll;
}
.billing-table{
  display: flex;
  justify-content: center;
  justify-items: center;
}
.demo-pagination-block{
  color: #de970a;
  width: 1300px;
}
/*.el-pagination__total {*/
/*  color: var(--el-text-color-regular);*/
/*  font-weight: normal;*/
/*  margin-left: var(--el-pagination-item-gap);*/
/*}*/
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.demo-form-inline .el-textarea {
  width: 220px;
}

.demo-form-inline .el-textarea.el-textarea__inner{
  min-height: 90px;
}
</style>
